import{_ as d}from"./index.vue_vue_type_style_index_0_lang2.js";import{d as i,e as r,r as m,P as c,Q as u,$ as k,X as o,R as e,S as s,K as p,a2 as _,a5 as f}from"./elementPlusModules.js";const g=e("p",null,"通过设置 columns 属性 slots 自定义表格头及对应列单元格的插槽",-1),y=e("p",null,"插槽名需要避开内置插槽 expand \\ expander_default \\ selection_header \\ selection_checkbox \\ handler_default 等名称",-1),L=i({__name:"Custom",setup(N){const t=r(`
<template>
  <div style="height: 70vh">
    <MerakXTable
      :columns-by-store="JSON.parse(JSON.stringify(state.columns))"
      :columns="state.columns"
      :data="state.data"
      :pagination="false"
    >
      <template #column_name_header="{ column }">
        <div>列表头: {{ column.title }}</div>
      </template>
      <template #column_name_default="{ row }">
        <div>单元格: {{ row.name }}</div>
      </template>
    </MerakXTable>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";

import MerakXTable, { MerakXTableColumn } from "../../../../../components/MerakXTable";

const state = reactive<{
  columns: MerakXTableColumn[];
  data: any[];
}>({
  columns: [
    { field: "name", title: "Name", slots: { header: \`column_name_header\`, default: \`column_name_default\` } },
    { field: "age", title: "Age" },
    { field: "address", title: "Address" }
  ],
  data: [
    {
      id: "1",
      name: "John Brown",
      age: 32,
      address: "New York No. 1 Lake Park",
      description: "My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."
    },
    {
      id: "2",
      name: "Jim Green",
      age: 42,
      address: "London No. 1 Lake Park",
      description: "My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park."
    },
    {
      id: "3",
      name: "Not Expandable",
      age: 29,
      address: "Jiangsu No. 1 Lake Park",
      description: "This not expandable"
    },
    {
      id: "4",
      name: "Joe Black",
      age: 32,
      address: "Sydney No. 1 Lake Park",
      description: "My name is Joe Black, I am 32 years old, living in Sydney No. 1 Lake Park."
    }
  ]
});
<\/script>
`),a=m({columns:[{field:"name",title:"Name",slots:{header:"column_name_header",default:"column_name_default"}},{field:"age",title:"Age"},{field:"address",title:"Address"}],data:[{id:"1",name:"John Brown",age:32,address:"New York No. 1 Lake Park",description:"My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."},{id:"2",name:"Jim Green",age:42,address:"London No. 1 Lake Park",description:"My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park."},{id:"3",name:"Not Expandable",age:29,address:"Jiangsu No. 1 Lake Park",description:"This not expandable"},{id:"4",name:"Joe Black",age:32,address:"Sydney No. 1 Lake Park",description:"My name is Joe Black, I am 32 years old, living in Sydney No. 1 Lake Park."}]});return(l,h)=>(c(),u(f,null,[g,y,k(p(d),{"columns-by-store":JSON.parse(JSON.stringify(a.columns)),columns:a.columns,data:a.data,pagination:!1},{column_name_header:o(({column:n})=>[e("div",null,"列表头: "+s(n.title),1)]),column_name_default:o(({row:n})=>[e("div",null,"单元格: "+s(n.name),1)]),_:1},8,["columns-by-store","columns","data"]),_(l.$slots,"default",{html:t.value})],64))}});export{L as _};
